<!-- 任务执行情况 -->
<template>
  <div class="recorded-video-column" v-show="dialogVisible">
    <div class="recorded-video">
      <p class="recorded-video-title"><span class="recorded-video-title-span">预览</span><span
          class="iconfont iconguanbi recorded-video-title-close" @click="$emit('update:visible',false)"></span></p>
      <video ref="videoModel" width="550" height="400" controls id="videoshowBox"></video>
      <el-input
          type="input"
          :rows="2"
          placeholder="备注"
          v-model="textarea"
          class="mt-20"
          v-if="typeOption=='videoGet'">
      </el-input>
    </div>
  </div>
</template>
<script>
export default {
  name: 'video',
  props: ['visible', 'videoSrc', 'videoStatus', 'typeOption'],
  components: {},
  data() {
    return {
      dialogVisible: this.visible,
      textarea: ''
    }
  },
  watch: {
    visible() {
      this.dialogVisible = this.visible
      if (this.visible) {
        let n = this
        this.$nextTick(() => {
          n.$refs.videoModel.src = this.videoSrc;
        })
      } else {
        this.$refs.videoModel.srcObject = null;
        this.stopVideoFn()
      }
    },
    textarea() {
      this.$emit('remarkFn', this.textarea)
    },
    videoStatus() {
      if (!this.videoStatus) {
        // 停止播放视频
        this.stopVideoFn()
      }
    }
  },
  created() {

  },
  methods: {
    stopVideoFn() {
      let videoOption = document.getElementById("videoshowBox");
      videoOption.pause();
    }
  },
  mounted() {
    console.log('获取按键视频')
  }
}
</script>
<style scoped>

.recorded-video-column {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .8);
}

.recorded-video {
  padding: 0 10px 20px 10px;
  background: #fff;
  border-radius: 3px;
  display: flex;
  flex-direction: column;
}

.recorded-video-title {
  overflow: hidden;
  display: flex;
  align-items: center;
}

.recorded-video-title-span {
  flex: 1;
}

.recorded-video-title span.recorded-video-title-close {
  padding: 10px 0;
  display: block;
  margin: 0;
  font-size: 24px;
  color: #999;
  cursor: pointer;
  width: 32px;
  text-align: center;
}
</style>
